<template>
  <view class="page-container">

    <!-- 银行卡列表 -->
    <view class="card-list">
      <!-- 银行卡项 -->
      <view class="card-item"  v-if="dataJson.is_bind>0">
        <view class="card-info">
          <!-- 银行logo和名称 -->
          <view class="bank-logo">
            <text class="bank-name">{{ dataJson.bind_info.bank_name }}</text>
          </view>
          
          <!-- 卡号信息 -->
          <view class="card-details">
            <text class="card-type">储蓄卡</text>
            <text class="card-number">**** **** **** {{ dataJson.bind_info.bank_card.slice(-4) }}</text>
          </view>
        </view>
      </view>
      <!-- 空状态 -->
      <view class="empty-state" v-else>
        <text class="empty-text">暂无绑定的银行卡</text>
      </view>
    </view>
    
    <!-- 添加银行卡按钮 -->
    <view class="add-card-btn">
      <button 
        class="primary-btn" 
        @click="navigateToBindCard"
      >
		{{dataJson.is_bind>0?'修改当前':'绑定新'}}银行卡
      </button>
    </view>
    
    <!-- 删除确认弹窗 -->
    <uni-popup 
      ref="deletePopup" 
      type="dialog" 
      :mask-click="false"
    >
      <uni-popup-dialog 
        title="删除银行卡" 
        content="确定要删除这张银行卡吗？"
        :before-close="handleDialogClose"
        @confirm="confirmDelete"
        @cancel="cancelDelete"
      ></uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
	import { request } from '@/utils/request.js'
export default {
  data() {
    return {
      // 银行卡列表数据
      bankCards: [
        
      ],
	  dataJson:{},
	  
      // 当前要删除的索引
      currentDeleteIndex: -1
    };
  },
  onLoad() {
	this.getList()
  },
  methods: {
    // 获取银行logo
    getBankLogo(bankName) {
      // 实际项目中可根据银行名称返回对应的logo
      // 这里使用示例图片
      return `/static/images/bank-logo.png`;
    },
	async getList(){
			  try{
			  	const  res = await request({
						url: 'user/bank-info',
						method: 'get',
						data: {
						}
					})
					console.log(res)
					if(res.status==200){
						this.dataJson = res.data
					}
			  }catch(e){
			  	//TODO handle the exception
			  }
	},
    
    // 导航到绑定银行卡页面
    navigateToBindCard() {
      uni.navigateTo({
        url: '/pages/bankCard/bind'
      });
    },
    
    // 显示删除确认弹窗
    showDeleteConfirm(index) {
      this.currentDeleteIndex = index;
      this.$refs.deletePopup.open();
    },
    
    // 确认删除
    confirmDelete() {
      if (this.currentDeleteIndex !== -1) {
        // 移除数组中的银行卡
        this.bankCards.splice(this.currentDeleteIndex, 1);
        // 保存到本地存储
        uni.setStorageSync('bankCards', this.bankCards);
        // 提示删除成功
        uni.showToast({
          title: '删除成功',
          icon: 'success',
          duration: 2000
        });
      }
      this.$refs.deletePopup.close();
      this.currentDeleteIndex = -1;
    },
    
    // 取消删除
    cancelDelete() {
      this.$refs.deletePopup.close();
      this.currentDeleteIndex = -1;
    },
    
    // 处理弹窗关闭
    handleDialogClose(type) {
      this.$refs.deletePopup.close();
      this.currentDeleteIndex = -1;
      return true;
    }
  }
};
</script>

<style scoped>
.page-container {
  min-height: 100vh;
  background-color: #f5f7fa;
}

/* 导航栏样式 */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  z-index: 99;
}

.navbar-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

/* 银行卡列表样式 */
.card-list {
  padding: 16px;
}

.card-item {
  background-color: #fff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s;
}

.card-item:active {
  transform: scale(0.99);
}

.bank-logo {
  display: flex;
  align-items: center;
}

.bank-logo image {
  width: 36px;
  height: 36px;
  margin-right: 12px;
}

.bank-name {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.card-details {
}

.card-type {
  font-size: 14px;
  color: #666;
  margin-bottom: 4px;
  display: block;
}

.card-number {
  font-size: 15px;
  color: #333;
  letter-spacing: 1px;
}

.card-actions {
  display: flex;
  align-items: center;
}

.delete-btn {
  background-color: transparent;
  padding: 8px;
  margin: 0;
  line-height: 1;
}

/* 空状态样式 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
}

.empty-state image {
  width: 120px;
  height: 120px;
  margin-bottom: 20px;
}

.empty-text {
  font-size: 16px;
  color: #999;
}

/* 添加银行卡按钮 */
.add-card-btn {
  padding: 20px 16px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #f5f7fa;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

.primary-btn {
  background-color: #007aff;
  color: #fff;
  height: 48px;
  line-height: 48px;
  border-radius: 24px;
  font-size: 16px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-icon {
  margin-right: 8px;
}
</style>
